<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>echarts地图</title>
    <script src="../js/data.js"></script>
    <script src="../js/vue2.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/jquery.min.js"></script>
</head>

<body>
<div class="viewport" id="home">
    <div class="mapPopWin" v-if="popShow" :style="{left:left-110+'px',top:top-130+'px'}">
        <img class="close" @click="popShow=false" src="../images/close.png" alt="">
        <h3>{{ address }}</h3>
        <div class="info2">
            <p>信息1：368</p>
            <p>信息2：16516</p>
        </div>
    </div>
    <div class="echarts" ref="echarts" id="echarts"></div>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#home",
        data() {
            return {
                list: [],
                popShow: false,
                left: 0,
                top: 0,
                height: 0,
                width: 0,
                address: '',
                num: 10,
            }
        },
        watch: {},
        mounted() {
            setTimeout(() => {
                this.drawechartmap()
            }, 100)
        },
        methods: {
            drawechartmap() {
                var that = this
                var geoCoordMap = {}
                window.addEventListener('resize', this.drawechartmap)
                var myChart = echarts.init(this.$refs.echarts)
                var nameMap = '地图数据';
                echarts.registerMap(nameMap, gdMap)
                var mapFeatures = echarts.getMap(nameMap).geoJson.features;
                mapFeatures.forEach(function (v, index) {
                    geoCoordMap[v.properties.name] = v.properties.center;
                });
                var option = {
                    visualMap: {
                        show: false,
                        max: 100,
                        seriesIndex: [3],
                        inRange: {
                            color: ["#A5DCF4", "#006edd"],
                        },
                    },
                    geo: [
                        {
                            map: nameMap,
                            roam: false, //是否允许缩放
                            zoom: 1.1, //默认显示级别
                            scaleLimit: {
                                min: 0,
                                max: 3,
                            }, //缩放级别
                            itemStyle: {
                                normal: {
                                    areaColor: "#013C62",
                                    shadowColor: "#12235c",
                                    shadowBlur: 20,
                                    shadowOffsetX: -5,
                                    shadowOffsetY: 15,
                                },
                            },
                            tooltip: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        //地图
                        {
                            type: "map",
                            mapType: nameMap,
                            geoIndex: -1,
                            zoom: 1.1, //默认显示级别
                            label: {
                                show: true,
                                color: "#ffffff",
                                emphasis: {
                                    color: "white",
                                    show: false,
                                },
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: "#2980b9",
                                    borderWidth: 1,
                                    areaColor: "#12235c",
                                },
                                emphasis: {
                                    areaColor: "#FA8C16",
                                    borderWidth: 0,
                                    color: "green",
                                },
                            },
                            data: Object.keys(geoCoordMap).map((name) => {
                                return {
                                    name: name,
                                    value: Math.random() * 100,
                                };
                            }),
                        },
                    ],
                };
                myChart.resize()
                myChart.setOption(option)
                myChart.off('click')
                myChart.on('click', function (params) {
                    console.log(params)
                    that.left = params.event.event.offsetX;
                    that.top = params.event.event.offsetY;
                    that.popShow = false
                    that.$nextTick(() => {
                        that.popShow = true
                    })
                    that.address = params.name
                    // that.getPositionByLonLats(data[0], data[1])
                    // myChart.off('click')
                    // myChart.setOption(optionMap, false)
                    // myChart.off('click')

                })
            }
        }
    })
</script>
</html>
<style>
    html, body {
        padding: 0;
        margin: 0;
    }

    #home {
        width: 100%;
        height: 100%;
        background: #0d1551;
        position: fixed;
    }

    .echarts {
        width: 100%;
        height: 100%;
        background: #0d1551;
        position: fixed;
    }

    .mapPopWin {
        position: absolute;
        left: 0;
        top: 0;
        background: url("../images/activeIcon.png") no-repeat;
        background-size: 100% 100%;
        width: 220PX;
        height: 141PX;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;
        z-index: 10000;
    }

    .mapPopWin .close {
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        width: 20px;
    }

    .mapPopWin h3 {
        margin-left: 15px;
        font-size: 22px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        color: #FEFEFE;
        width: 70px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .mapPopWin .info2 {
        font-size: 14px;
        font-family: PingFang;
        font-weight: 500;
        color: #FFFFFF;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: nowrap;
        flex-direction: column;
        margin-top: 17px;
        margin-left: 10px;
        align-content: flex-start;
    }

    .mapPopWin p {
        margin: 0px;
    }
</style>
